<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div>
		<select name="key" id="key" value="name">
			<option value="id">主键</option>
			<option value="name">名称</option>
			<option value="value">取值</option>
		</select>
		<input type="text" name="keyword" id="keyword">
		<input type="button" id="search" value="Searching" onclick="doSearch()">
		<table>
			<tr>
				<th></th>
				<th>id</th>
				<th>name</th>
				<th>value</th>
			</tr>
			<tr>
				<td><input type="checkbox" name="ids" value="1"></td>
				<td>1</td>
				<td>1</td>
				<td>1</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="ids" value="2"></td>
				<td>2</td>
				<td>2</td>
				<td>2</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="ids" value="3"></td>
				<td>3</td>
				<td>3</td>
				<td>3</td>
			</tr>
		</table>
		<input type="checkbox" id="all" onclick="checkAll()">All
		<select name="operation" id="operation" onclick="doAction(this)">
			<option value="none">Selected Item:</option>
			<option value="delete">delete</option>
			<option value="edit">edit</option>
			<option value="delete">delete</option>
		</select>
	</div>

	<script type="text/javascript">
		function checkAll() {
			var all = document.getElementById("all");
			var checks = document.getElementsByName("ids");
			var length = checks.length;
			for (var i = 0; i < length; i++) {
				checks[i].checked = all.checked;
			}
		}

		function doAction(obj) {
			/*
			console.log(obj.value);
			console.log(obj.name);			

			var options = obj.options;
			var length = options.length;
			console.log("options length:" + length);
			for (var i = 0; i < length; i++) {
				console.log(options[i].text + "-" + options[i].value);
			};
			*/

			if (obj.value == "delete") {
				console.log("start do action");
				var checks = document.getElementsByName("ids");
				var length = checks.length;
				console.log("length:" + length);
				var ids = new Array();
				var index = 0;
				for (var i = 0; i < length; i++) {
					console.log("----" + i + checks[i].checked);
					if (checks[i].checked == true) {
						ids[index] = checks[i].value;
						index++;
					}
				}

				console.log("checked: " + ids.toString());
			}

			obj.options[0].selected = true;
		}

		function doSearch() {
			var obj = document.getElementById("key"); //定位id
			var index = obj.selectedIndex; // 选中索引
			var text = obj.options[index].text; // 选中文本
			var value = obj.options[index].value; // 选中值

			var keyword = document.getElementById("keyword").value;

			/*
			if (keyword == "") {
				alert("keyword is empty");
			} else {
				alert("keyword is [" + keyword + "]");
			}

			alert(index + "-" + text + "-" + value);
			*/

			alert(value + ":" + keyword);
		}
	</script>
</body>
</html>